@import "../common/common";
.box{
  border: 1px solid @bc;
  .shadow(.05);
}
.tdWrap{
  padding: 20px 0;
  display: flex;
  .tdLeft{
    flex: 1;
    .sendWrap{
      background-color: @f;
      border-radius: 3px;
      height: 120px;
      .box;
      input{
        border: none;
        width: 100%;
        height: 70px;
        padding: 10px;
        resize: none;
      }
      .typeBox{
        display: flex;
        height: 50px;
        .type{
          flex: 1;
          .flexWrap;
          border-right: 1px solid #eee;
          &:last-child{
            border-right: none;
          }
          i{
            font-size: 20px;
            margin-right: 10px;
          }
        }
        .text{
          border-top: 2px solid #8f4dcb;
          i{
            color: #8f4dcb;
          }
        }
        .picture{
          border-top: 2px solid #7ed321;
          i{
            color: #7ed321;
          }
        }
        .article{
           border-top: 2px solid #ffa154;
          i{
            color: #ffa154;
          }
         }

      }
    }
    .tdList{
      margin-top: 20px;
      li{
        display: flex;
        .avaTar{
          width: 100px;
          padding-right: 20px;
          img{
            border-radius: 100%;
            .shadow(.03);
          }
        }
        .conTent{
          flex: 1;
          background-color: @f;
          border-radius: 5px;
          .shadow(.03);
          .who{
            padding: 20px 30px 15px;
            border-bottom: 1px dashed #e4e4e4;
            .flexTwo;
            span:last-child{
              color: @minorTxt;
            }
            a{
              color: @theme;
            }
          }
          .deTail{
            padding: 15px 30px;
          }
          .opt{
            padding: 0 30px 15px;
            span{
              color: @minorTxt;
              margin-right: 20px;
              i{
                margin-right: 5px;
              }
            }
          }
          .comment{
            margin: 0 30px;
            border-top: 1px dashed #e4e4e4;
            padding: 15px 0;
            .number{
              color: @minorTxt;
              font-size: 13px;
              .good{
                display: flex;
                align-items: center;
                a{
                  .circle(25px,25px,100%);
                  margin-right: 8px;
                }
              }
              .shAre{
                span:nth-child(2){
                  padding: 0 8px;
                }
              }
            }
            .cmtWrap{
              background-color: #f7f7ff;
              margin-top: 15px;
              border-radius: 5px;
              padding: 10px;
              .send{
                align-items: center;
              }
              .more{
                text-align: center;
                width: 100%;
                display: inline-block;
                &:hover{
                  i{
                    margin-left: 10px;
                  }
                }
                i{
                  font-size: 12px;
                  margin-left: 5px;
                  .filter;
                }
              }
              .row{
                display: flex;
                margin-bottom: 15px;
                .avtWrap{
                  .circle(40px,40px,100%);
                  margin-right: 15px;
                }
                .input{
                  border: 1px solid #e4e4e4;
                  border-radius: 3px;
                  background-color: @f;
                  height: 35px;
                  flex: 1;
                  display: flex;
                  align-items: center;
                  input{
                    flex: 1;
                    height: 100%;
                    border: none;
                    padding: 5px 10px;
                  }
                  a{
                    height: 100%;
                    display: inline-block;
                    padding: 0 10px;
                    line-height: 33px;
                    font-size: 18px;
                  }
                }
                .cmt{
                  display: flex;
                  flex: 1;
                  .name{
                    padding-right: 10px;
                    a{
                      max-width: 90px;
                      color: @theme;
                    }
                    p{
                      color: @minorTxt;
                      font-size: 13px;
                      line-height: 1;
                    }
                  }
                  .detail{
                    flex: 1;
                  }
                  .time{
                    color: @minorTxt;
                    font-size: 12px;
                    padding-left: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .tdRight{
    width: 300px;
    margin-left: 20px;
    .rightBox{
      border-radius: 5px;
      .shadow(.03);
      margin-bottom: 20px;
      position: relative;
      background-color: @f;
    }
    .rightTit{
      display: flex;
      padding: 10px;
      align-items: center;
      .line{
        flex: 1;
        margin: 0 10px;
        height: 1px;
        background-color: #e4e4e4;
      }
      a{
        font-size: 12px;
      }
    }
    .board{
      padding: 10px;
      .rightBox;
      text-align: center;
      .avaTar{
        .circle(80px,80px,100%);
        margin: 20px auto 10px;
      }
      .name{
        color: #333;
        font-weight: 600;
        display: block;
        margin: 0 auto;
        font-size: 15px;
        text-shadow: 2px 2px 5px rgba(0,0,0,.1);
        max-width: 80%;
      }
      .sign{
        font-size: 13px;
        color: @minorTxt;
        text-align: center;
        max-width: 80%;
      }
    }
    .pic{
      height: 250px;
      background-color: @f;
      border-radius: 5px;
      margin-bottom: 20px;
      .picRow{
        height: 103px;
        width: 100%;
        display: flex;
        overflow: hidden;
        >div{
          flex: 1;
        }
      }
      .two >div:first-child{
        border-right: 1px solid @f;
      }
      .three{
        >div{
          border-top: 1px solid @f;
          &:nth-child(2){
            border-right: 1px solid @f;
            border-left: 1px solid @f;
          }
        }
        .last{
          position: relative;
          .mask{
            .absolute;
            background-color: rgba(0,0,0,.4);
            color: @f;
            font-size: 40px;
          }
        }
      }
    }
    .groom{
      .rightBox;
      .row{
        display: flex;
        padding: 0 10px 10px;
        .three{
          flex: 1;
          height: 85px;
          position: relative;
          overflow: hidden;
          &:nth-child(2){
            margin: 0 10px;
          }
          .mask{
            .absolute;
            background-color: rgba(0,0,0,.3);
            text-align: center;
            &:hover{
              a{
                margin-top: 10px;
              }
              p{
                bottom: 10px;
              }
            }
            a{
              color: @f;
              margin-top: 50px;
              max-width: 80%;
              .filter;
            }
            p{
              position: absolute;
              color: @f;
              bottom: -100%;
              padding: 3px 10px;
              border: 1px dashed @f;
              line-height: 1;
              left: 50%;
              margin-left: -25px;
              .filter;
              cursor: pointer;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }
}